<!DOCTYPE html>


  <html class="light page-post">


<head>
  <meta charset="utf-8">
  
  <title>Android 上使用WebView 和Echart 展示图表数据 | 东窗随笔</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="Android,EChart,JS,Webview," />
  

  <meta name="description" content="&amp;#x4E4B;&amp;#x524D;&amp;#x5728;&amp;#x9879;&amp;#x76EE;&amp;#x4E2D;&amp;#x4F7F;&amp;#x7528;&amp;#x8FC7;MPAndroidChart &amp;#x663E;&amp;#x793A;&amp;#x8FC7;&amp;#x6570;&amp;#x636E;&amp;#x56FE;&amp;#x8868;&amp;#xFF0C;&amp;#x73B0;&amp;#x5728;&amp;#x9700;&amp;#x8981;&amp;#x4F7F;&amp;#x7528;H">
<meta property="og:type" content="article">
<meta property="og:title" content="Android 上使用WebView 和Echart 展示图表数据">
<meta property="og:url" content="http://hanlyjiang.github.io/2016/08/07/Android-上使用Echart-js/index.html">
<meta property="og:site_name" content="东窗随笔">
<meta property="og:description" content="&amp;#x4E4B;&amp;#x524D;&amp;#x5728;&amp;#x9879;&amp;#x76EE;&amp;#x4E2D;&amp;#x4F7F;&amp;#x7528;&amp;#x8FC7;MPAndroidChart &amp;#x663E;&amp;#x793A;&amp;#x8FC7;&amp;#x6570;&amp;#x636E;&amp;#x56FE;&amp;#x8868;&amp;#xFF0C;&amp;#x73B0;&amp;#x5728;&amp;#x9700;&amp;#x8981;&amp;#x4F7F;&amp;#x7528;H">
<meta property="og:updated_time" content="2016-12-08T10:13:52.796Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Android 上使用WebView 和Echart 展示图表数据">
<meta name="twitter:description" content="&amp;#x4E4B;&amp;#x524D;&amp;#x5728;&amp;#x9879;&amp;#x76EE;&amp;#x4E2D;&amp;#x4F7F;&amp;#x7528;&amp;#x8FC7;MPAndroidChart &amp;#x663E;&amp;#x793A;&amp;#x8FC7;&amp;#x6570;&amp;#x636E;&amp;#x56FE;&amp;#x8868;&amp;#xFF0C;&amp;#x73B0;&amp;#x5728;&amp;#x9700;&amp;#x8981;&amp;#x4F7F;&amp;#x7528;H">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=d671a41f" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?57e94d016e201fba3603a8a2b0263af0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  

  
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  
</head>

<body>


  
    <span id="toolbox-mobile" class="toolbox-mobile">观乎</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">观乎</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/category/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/tag/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/atom.xml"
            rel="noopener noreferrer"
            target="_blank"
            >
            RSS
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#使用到的开源项目"><span class="toc-text">使用到的开源项目</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js-和-html-编写"><span class="toc-text">JS 和 html 编写</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#html-页面编写"><span class="toc-text">html 页面编写</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-脚本"><span class="toc-text">JS 脚本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#android-代码编写"><span class="toc-text">Android 代码编写</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-webappinterface-定义和实现"><span class="toc-text">1. WebAppInterface 定义和实现</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-webview-上启用javascript-并注入java对象"><span class="toc-text">2. WebView 上启用JavaScript 并注入Java对象：</span></a></li></ol></li></ol>
  </div>



<div class="content content-post CENTER">
   <article id="post-Android-上使用Echart-js" class="article article-type-post" itemprop="blogPost">
  <header class="article-header">
    <h1 class="post-title">Android 上使用WebView 和Echart 展示图表数据</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.08.07</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>hanlyjiang@outlook.com</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Android/">Android</a>
  </span>



      
        <span>
          <i class="icon-comment"></i>
          <a href="http://hanlyjiang.site/2016/08/07/Android-上使用Echart-js/#disqus_thread"></a>
        </span>
      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      

      
      
    </div>
  </header>

  <div class="article-content">
    
      <p>&#x4E4B;&#x524D;&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x4F7F;&#x7528;&#x8FC7;MPAndroidChart &#x663E;&#x793A;&#x8FC7;&#x6570;&#x636E;&#x56FE;&#x8868;&#xFF0C;&#x73B0;&#x5728;&#x9700;&#x8981;&#x4F7F;&#x7528;HTML + Echart &#x6765;&#x663E;&#x793A;&#xFF0C;&#x5199;&#x4E86;&#x4E00;&#x4E2A;Demo,DEMO&#x4E2D;&#x5B9E;&#x73B0;&#x4E86;&#x7EBF;&#x56FE;&#xFF0C;&#x997C;&#x56FE;&#xFF0C;&#x8FD8;&#x6709;&#x67F1;&#x72B6;&#x56FE;&#x3002;</p>
<p>&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5730;&#x5740;:<a href="https://github.com/hanlyjiang/Demo-AndroidEChartWebJs" title="&#x793A;&#x4F8B;&#x4EE3;&#x7801;" target="_blank" rel="external">&#x70B9;&#x51FB;&#x8DF3;&#x8F6C;&#x5230;github</a></p>
<h2 id="&#x4F7F;&#x7528;&#x5230;&#x7684;&#x5F00;&#x6E90;&#x9879;&#x76EE;"><a href="#&#x4F7F;&#x7528;&#x5230;&#x7684;&#x5F00;&#x6E90;&#x9879;&#x76EE;" class="headerlink" title="&#x4F7F;&#x7528;&#x5230;&#x7684;&#x5F00;&#x6E90;&#x9879;&#x76EE;"></a>&#x4F7F;&#x7528;&#x5230;&#x7684;&#x5F00;&#x6E90;&#x9879;&#x76EE;</h2><ul>
<li><a href="http://echarts.baidu.com/" target="_blank" rel="external">EChart &#x5E93; -js</a><ul>
<li>&#x7248;&#x672C;&#xFF1A;2.2.7</li>
</ul>
</li>
<li><a href="http://git.oschina.net/free/ECharts" target="_blank" rel="external">EChart java &#x5BF9;&#x8C61;&#x5E93;</a> &#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x9488;&#x5BF9;ECharts3.x(2.x)&#x7248;&#x672C;&#x7684;Java&#x7C7B;&#x5E93;&#xFF0C;&#x5B9E;&#x73B0;&#x4E86;&#x6240;&#x6709;ECharts&#x4E2D;&#x7684;Json&#x7ED3;&#x6784;&#x5BF9;&#x5E94;&#x7684;Java&#x5BF9;&#x8C61;&#xFF0C;&#x5E76;&#x4E14;&#x53EF;&#x4EE5;&#x5F88;&#x65B9;&#x4FBF;&#x7684;&#x521B;&#x5EFA;Option&#x3002;&#x8FD9;&#x4E2A;&#x5E93;&#x5F15;&#x7528;&#x4E86;Gson&#xFF0C;&#x6240;&#x4EE5;build.gradle &#x4E2D;&#x4E5F;&#x8981;&#x52A0;&#x5165;GSON &#x7684;&#x4F9D;&#x8D56;&#x3002;<ul>
<li>&#x7248;&#x672C; 2.2.7 </li>
</ul>
</li>
</ul>
<h2 id="js-&#x548C;-html-&#x7F16;&#x5199;"><a href="#JS-&#x548C;-html-&#x7F16;&#x5199;" class="headerlink" title="JS &#x548C; html &#x7F16;&#x5199;"></a>JS &#x548C; html &#x7F16;&#x5199;</h2><p>&#x4E3A;&#x65B9;&#x4FBF;&#x6D4B;&#x8BD5;&#xFF0C;html&#x9875;&#x9762;&#x548C;js&#x4EE3;&#x7801;&#x653E;&#x7F6E;&#x4E8E;&#x9879;&#x76EE;&#x7684;assets &#x76EE;&#x5F55;&#x4E2D;&#xFF0C;Android&#x4EE3;&#x7801;&#x8BBF;&#x95EE;&#x8DEF;&#x5F84;&#x4E3A;&#xFF1A;file:///android_asset/jsWeb/echart.html</p>
<h3 id="html-&#x9875;&#x9762;&#x7F16;&#x5199;"><a href="#html-&#x9875;&#x9762;&#x7F16;&#x5199;" class="headerlink" title="html &#x9875;&#x9762;&#x7F16;&#x5199;"></a>html &#x9875;&#x9762;&#x7F16;&#x5199;</h3><ol>
<li><p>&#x5728;head&#x4E2D;&#x5F15;&#x5165; js &#x811A;&#x672C;&#xFF0C;&#x4E3B;&#x8981;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;(<a href="https://github.com/hanlyjiang/Demo-AndroidEChartWebJs/blob/master/AppTemplate/src/main/assets/jsWeb/echart.html" target="_blank" rel="external">&#x70B9;&#x51FB;&#x67E5;&#x770B;&#x5168;&#x90E8;&#x4EE3;&#x7801;&#xFF1A;<em>echart.html</em></a>)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;head&gt;</div><div class="line">&lt;!-- &#x5BFC;&#x5165;script --&gt;</div><div class="line">&lt;script src=&quot;http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;script src=&quot;./android.js&quot;&gt;&lt;/script&gt;</div><div class="line"></div><div class="line">&lt;/head&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>body&#x4E2D;&#x8BF7;&#x6C42;&#x9700;&#x8981;&#x7684;EChart&#x811A;&#x672C;&#xFF0C;&#x5E76;&#x6DFB;&#x52A0;&#x5BF9;&#x5E94;&#x63A7;&#x4EF6;,&#x4E3B;&#x8981;&#x4EE3;&#x7801;&#x5982;&#x4E0B;: (<a href="https://github.com/hanlyjiang/Demo-AndroidEChartWebJs/blob/master/AppTemplate/src/main/assets/jsWeb/echart.html" target="_blank" rel="external"> &#x70B9;&#x51FB;&#x67E5;&#x770B;&#x5168;&#x90E8;&#x4EE3;&#x7801;&#xFF1A;<em>echart.html</em></a>) &#x3002;   &#x6211;&#x5728;&#x5176;&#x4E2D;&#x6DFB;&#x52A0;&#x4E86;&#x4E00;&#x4E2A;js&#x4E2D;&#x6307;&#x5B9A;&#x6570;&#x636E;&#x7684;EChart &#x8868;&#x683C;&#x7528;&#x4E8E;&#x6D4B;&#x8BD5;   </p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div></pre></td><td class="code"><pre><div class="line">&lt;div id=&quot;main&quot; style=&quot;height:400px&quot;&gt;&lt;/div&gt;</div><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">        // &#x8DEF;&#x5F84;&#x914D;&#x7F6E;</div><div class="line">        require.config({</div><div class="line">          paths: {</div><div class="line">            echarts: &apos;http://echarts.baidu.com/echarts2/doc/example/www/js&apos;</div><div class="line">            //echarts: &apos;./www/js&apos;</div><div class="line">          }</div><div class="line">        });</div><div class="line">        // &#x4F7F;&#x7528;</div><div class="line">        require(</div><div class="line">          [</div><div class="line">            &apos;echarts&apos;,</div><div class="line">            &apos;echarts/chart/line&apos;, // &#x4F7F;&#x7528;&#x67F1;&#x72B6;&#x56FE;&#x5C31;&#x52A0;&#x8F7D;line&#x6A21;&#x5757;&#xFF0C;&#x6309;&#x9700;&#x52A0;&#x8F7D;</div><div class="line">            &apos;echarts/chart/bar&apos;, // &#x4F7F;&#x7528;&#x67F1;&#x72B6;&#x56FE;&#x5C31;&#x52A0;&#x8F7D;bar&#x6A21;&#x5757;&#xFF0C;&#x6309;&#x9700;&#x52A0;&#x8F7D;</div><div class="line">            &apos;echarts/chart/pie&apos;, // &#x4F7F;&#x7528;&#x67F1;&#x72B6;&#x56FE;&#x5C31;&#x52A0;&#x8F7D;pie&#x6A21;&#x5757;&#xFF0C;&#x6309;&#x9700;&#x52A0;&#x8F7D;</div><div class="line">          ],</div><div class="line">          function (ec) {</div><div class="line">            // &#x57FA;&#x4E8E;&#x51C6;&#x5907;&#x597D;&#x7684;dom&#xFF0C;&#x521D;&#x59CB;&#x5316;echarts&#x56FE;&#x8868;</div><div class="line">            var myChart = ec.init(document.getElementById(&apos;main&apos;));</div><div class="line">            //&#x8BBE;&#x7F6E;&#x6570;&#x636E;</div><div class="line">            var option = {</div><div class="line">            // .... &#x6570;&#x636E;&#x90E8;&#x5206;</div><div class="line">        };</div><div class="line">            // &#x4E3A;echarts&#x5BF9;&#x8C61;&#x52A0;&#x8F7D;&#x6570;&#x636E;</div><div class="line">            myChart.setOption(option);</div><div class="line">          }</div><div class="line">        )</div><div class="line">&lt;/script&gt;</div><div class="line"></div><div class="line">&lt;hr/&gt;</div><div class="line">&lt;p&gt;</div><div class="line">&lt;b&gt;&#x4ECE;Android &#x4EE3;&#x7801;&#x4E2D;&#x83B7;&#x53D6;&#x6570;&#x636E;&#x7ED8;&#x5236;&#x56FE;&#x8868;&lt;/b&gt;&lt;br/&gt;</div><div class="line">&lt;button onClick=&quot;loadALineChart()&quot; style=&quot;height:40px&quot;&gt;&#x7EBF;&#x72B6;&#x56FE;&lt;/button&gt;</div><div class="line">&lt;button onClick=&quot;loadAChart(2)&quot; style=&quot;height:40px&quot;&gt;&#x997C;&#x72B6;&#x56FE;&lt;/button&gt;</div><div class="line">&lt;button onClick=&quot;loadAChart(1)&quot; style=&quot;height:40px&quot;&gt;&#x67F1;&#x72B6;&#x56FE;&lt;/button&gt;</div><div class="line"></div><div class="line">&lt;p id=&quot;textcontent&quot;&gt;&#x6CA1;&#x6709;&#x5185;&#x5BB9;&lt;/p&gt;</div><div class="line">&lt;div id=&quot;chart2&quot; style=&quot;height:400px&quot;/&gt;</div><div class="line">&lt;/p&gt;</div></pre></td></tr></table></figure>
<h3 id="js-&#x811A;&#x672C;"><a href="#JS-&#x811A;&#x672C;" class="headerlink" title="JS &#x811A;&#x672C;"></a>JS &#x811A;&#x672C;</h3><p>&#x8FD9;&#x91CC;&#x6709;&#x4E00;&#x70B9;&#x8981;&#x6CE8;&#x610F;&#xFF1A;Android WebView &#x63D0;&#x4F9B;&#x7684;&#x63A5;&#x53E3;&#x8FD4;&#x56DE;String &#x7C7B;&#x578B;&#x7684;json option &#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x800C;JS &#x7AEF;&#x63A5;&#x53D7;&#x5230;&#x5B57;&#x7B26;&#x4E32;&#x540E;&#x9700;&#x8981;&#x7528;JSON.parse &#x65B9;&#x6CD5;&#x8F6C;&#x5316;&#x6210;js&#x7684;Object &#x5BF9;&#x8C61;&#xFF0C;&#x53EA;&#x6709;&#x8F6C;&#x6362;&#x6210;&#x5BF9;&#x8C61;&#x4E4B;&#x540E;&#x624D;&#x53EF;&#x4EE5;&#x4F20;&#x5165;&#x5230;Echart&#x7684;setOption &#x65B9;&#x6CD5;&#x4E2D;&#x663E;&#x793A;&#x51FA;&#x6765;&#x3002;<br>&#x4E3B;&#x8981;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF0C;<a href="https://github.com/hanlyjiang/Demo-AndroidEChartWebJs/blob/master/AppTemplate/src/main/assets/jsWeb/android.js" target="_blank" rel="external">&#x70B9;&#x51FB;&#x67E5;&#x770B;&#x5168;&#x90E8;&#x4EE3;&#x7801;</a></p>
<pre><code>function toast(msg){
Android.showToast(msg);
}

function loadALineChart(){
    // &#x5FC5;&#x987B;&#x52A0;JOSN.parse &#x8F6C;&#x6362;&#x6570;&#x636E;&#x7C7B;&#x578B;
    var option = JSON.parse(Android.getLineChartOptions());

    var chart2Doc = document.getElementById(&apos;chart2&apos;);
    var myChart2 = require(&apos;echarts&apos;).init(chart2Doc);

    myChart2.setOption(option);
    document.getElementById(&apos;textcontent&apos;).innerHTML=option;
    toast(option);
}

/**
type :  1 - &#x997C;&#x72B6;&#x56FE;
        2 - &#x67F1;&#x72B6;&#x56FE;
*/
function loadAChart(type){
    // &#x5FC5;&#x987B;&#x7528;JSON.parse() &#x8F6C;&#x6362;&#x4E00;&#x4E0B;&#xFF0C;&#x624D;&#x53EF;&#x4EE5;&#x663E;&#x793A;&#xFF0C;&#x5426;&#x5219;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x4F1A;&#x4E0D;&#x5BF9;
    var option = JSON.parse(Android.getPieChartOptions(type));
    var chart2Doc = document.getElementById(&apos;chart2&apos;);
    var myChart2 = require(&apos;echarts&apos;).init(chart2Doc);

    myChart2.setOption(option);
    document.getElementById(&apos;textcontent&apos;).innerHTML=option;
}
</code></pre><h2 id="android-&#x4EE3;&#x7801;&#x7F16;&#x5199;"><a href="#Android-&#x4EE3;&#x7801;&#x7F16;&#x5199;" class="headerlink" title="Android &#x4EE3;&#x7801;&#x7F16;&#x5199;"></a>Android &#x4EE3;&#x7801;&#x7F16;&#x5199;</h2><h3 id="1-webappinterface-&#x5B9A;&#x4E49;&#x548C;&#x5B9E;&#x73B0;"><a href="#1-WebAppInterface-&#x5B9A;&#x4E49;&#x548C;&#x5B9E;&#x73B0;" class="headerlink" title="1. WebAppInterface &#x5B9A;&#x4E49;&#x548C;&#x5B9E;&#x73B0;"></a>1. WebAppInterface &#x5B9A;&#x4E49;&#x548C;&#x5B9E;&#x73B0;</h3><p><a href="https://github.com/hanlyjiang/Demo-AndroidEChartWebJs/blob/master/AppTemplate/src/main/java/com/github/hanlyjiang/androidtemplate/EChartLocalInterfaceActivity.java" target="_blank" rel="external">&#x70B9;&#x51FB;&#x67E5;&#x770B;&#x5168;&#x90E8;&#x6587;&#x4EF6;&#x5185;&#x5BB9;</a><br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * &#x6CE8;&#x5165;&#x5230;JS&#x91CC;&#x7684;&#x5BF9;&#x8C61;&#x63A5;&#x53E3;</div><div class="line"> */</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">WebAppInterface</span> </span>{</div><div class="line">    Context mContext;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">public</span> <span class="title">WebAppInterface</span><span class="params">(Context c)</span> </span>{</div><div class="line">        mContext = c;</div><div class="line">    }</div><div class="line"></div><div class="line">    <span class="comment">/**</span></div><div class="line">     * &#x83B7;&#x53D6;</div><div class="line">     *</div><div class="line">     * <span class="doctag">@return</span></div><div class="line">     */</div><div class="line">    <span class="meta">@JavascriptInterface</span></div><div class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getLineChartOptions</span><span class="params">()</span> </span>{</div><div class="line">        GsonOption option = markLineChartOptions();</div><div class="line">        LogUtils.d(option.toString());</div><div class="line">        <span class="keyword">return</span> option.toString();</div><div class="line">    }</div><div class="line"></div><div class="line">    <span class="meta">@JavascriptInterface</span></div><div class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">showToast</span><span class="params">(String msg)</span> </span>{</div><div class="line">        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();</div><div class="line">    }</div><div class="line"></div><div class="line">    <span class="comment">/**</span></div><div class="line">     * PieChart &#x6216;&#x8005;&#x67F1;&#x72B6;&#x56FE;&#x6570;&#x636E;&#x793A;&#x4F8B;</div><div class="line">     * <span class="doctag">@param</span> type 1 - &#x997C;&#x72B6;&#x56FE;&#x6570;&#x636E;&#xFF1B; 2 - &#x67F1;&#x72B6;&#x56FE;&#x6570;&#x636E;</div><div class="line">     * <span class="doctag">@return</span></div><div class="line">     */</div><div class="line">    <span class="meta">@JavascriptInterface</span></div><div class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getPieChartOptions</span><span class="params">(<span class="keyword">int</span> type)</span> </span>{</div><div class="line"></div><div class="line">        mWebView.post(<span class="keyword">new</span> Runnable() {</div><div class="line">            <span class="meta">@Override</span></div><div class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>{</div><div class="line">                showDialog();</div><div class="line">            }</div><div class="line">        });</div><div class="line">        <span class="keyword">try</span> {</div><div class="line">            Thread.currentThread().sleep(<span class="number">1000</span>);</div><div class="line">        } <span class="keyword">catch</span> (InterruptedException e) {</div><div class="line">            e.printStackTrace();</div><div class="line">        }</div><div class="line">        <span class="comment">//&#x5730;&#x5740;&#xFF1A;http://echarts.baidu.com/doc/example/pie7.html</span></div><div class="line">        GsonOption option = <span class="keyword">new</span> GsonOption();</div><div class="line">        <span class="comment">// &#x8BBE;&#x7F6E;&#x6807;&#x9898;</span></div><div class="line">        option.title(<span class="keyword">new</span> Title().text(<span class="string">&quot;&#x67D0;&#x7AD9;&#x70B9;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x6765;&#x6E90;&quot;</span>).subtext(<span class="string">&quot;&#x7EAF;&#x5C5E;&#x865A;&#x6784;&quot;</span>).x(X.center));</div><div class="line">        <span class="keyword">if</span>(type == <span class="number">2</span>) {</div><div class="line">            option.tooltip().trigger(Trigger.item).formatter(<span class="string">&quot;{a} &lt;br/&gt;{b} : {c} ({d}%)&quot;</span>);</div><div class="line">        }<span class="keyword">else</span>  <span class="keyword">if</span>(type == <span class="number">1</span>){</div><div class="line">            option.tooltip().trigger(Trigger.item).formatter(<span class="string">&quot;{a} &lt;br/&gt;{b} : {c}&quot;</span>);</div><div class="line">        }</div><div class="line">        <span class="comment">// &#x8BBE;&#x7F6E;&#x56FE;&#x4F8B;</span></div><div class="line">        option.legend().data(<span class="string">&quot;&#x76F4;&#x63A5;&#x8BBF;&#x95EE;&quot;</span>, <span class="string">&quot;&#x90AE;&#x4EF6;&#x8425;&#x9500;&quot;</span>, <span class="string">&quot;&#x8054;&#x76DF;&#x5E7F;&#x544A;&quot;</span>, <span class="string">&quot;&#x89C6;&#x9891;&#x5E7F;&#x544A;&quot;</span>, <span class="string">&quot;&#x641C;&#x7D22;&#x5F15;&#x64CE;&quot;</span>).orient(Orient.vertical).x(X.left);</div><div class="line"></div><div class="line">        <span class="comment">// &#x662F;&#x5426;&#x53EF;&#x4EE5;&#x62D6;&#x52A8;&#x4EE5;&#x8BA1;&#x7B97;</span></div><div class="line">        option.calculable(<span class="keyword">true</span>);</div><div class="line"></div><div class="line">        <span class="keyword">if</span>(type == <span class="number">2</span>){</div><div class="line">            <span class="comment">// &#x6784;&#x9020;&#x6570;&#x636E;</span></div><div class="line">            Pie  pie1 = <span class="keyword">new</span> Pie(<span class="string">&quot;&#x8BBF;&#x95EE;&#x6765;&#x6E90;&quot;</span>);</div><div class="line">            pie1.type(SeriesType.pie).radius(<span class="string">&quot;45%&quot;</span>).center(<span class="string">&quot;50%&quot;</span>,<span class="string">&quot;60%&quot;</span>);</div><div class="line">            pie1.data(<span class="keyword">new</span> Data(<span class="string">&quot;&#x76F4;&#x63A5;&#x8BBF;&#x95EE;&quot;</span>,<span class="number">335</span>),</div><div class="line">                    <span class="keyword">new</span> Data(<span class="string">&quot;&#x90AE;&#x4EF6;&#x8425;&#x9500;&quot;</span>,<span class="number">310</span>),</div><div class="line">                    <span class="keyword">new</span> Data(<span class="string">&quot;&#x8054;&#x76DF;&#x5E7F;&#x544A;&quot;</span>,<span class="number">234</span>),</div><div class="line">                    <span class="keyword">new</span> Data(<span class="string">&quot;&#x89C6;&#x9891;&#x5E7F;&#x544A;&quot;</span>,<span class="number">135</span>),</div><div class="line">                    <span class="keyword">new</span> Data(<span class="string">&quot;&#x641C;&#x7D22;&#x5F15;&#x64CE;&quot;</span>,<span class="number">1548</span>)</div><div class="line">            );</div><div class="line">            option.series(pie1);</div><div class="line">        }<span class="keyword">else</span>  <span class="keyword">if</span>(type ==<span class="number">1</span>) {</div><div class="line">            <span class="comment">// &#x6784;&#x5EFA;&#x67F1;&#x72B6;&#x6570;&#x636E;</span></div><div class="line">            option.xAxis(<span class="keyword">new</span> CategoryAxis().name(<span class="string">&quot;&#x8BBF;&#x95EE;&#x6765;&#x6E90;&quot;</span>).data(<span class="string">&quot;&#x89C6;&#x9891;&#x5E7F;&#x544A;&quot;</span>,<span class="string">&quot;&#x641C;&#x7D22;&#x5F15;&#x64CE;&quot;</span>,<span class="string">&quot;&#x8054;&#x76DF;&#x5E7F;&#x544A;&quot;</span>,<span class="string">&quot;&#x90AE;&#x4EF6;&#x8425;&#x9500;&quot;</span>,<span class="string">&quot;&#x76F4;&#x63A5;&#x8BBF;&#x95EE;&quot;</span>));</div><div class="line">            option.yAxis(<span class="keyword">new</span> ValueAxis());</div><div class="line"></div><div class="line">            Bar bar = <span class="keyword">new</span> Bar(<span class="string">&quot;&#x8BBF;&#x95EE;&#x6765;&#x6E90;&quot;</span>);</div><div class="line">            bar.data(<span class="number">11</span>,<span class="number">4</span>,<span class="number">14</span>,<span class="number">45</span>,<span class="number">67</span>,<span class="number">88</span>);</div><div class="line">            option.series(bar);</div><div class="line">        }</div><div class="line">        Log.d(<span class="string">&quot;TAG&quot;</span>,option.toString());</div><div class="line">        mWebView.post(<span class="keyword">new</span> Runnable() {</div><div class="line">            <span class="meta">@Override</span></div><div class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>{</div><div class="line">                dismissDialog();</div><div class="line">            }</div><div class="line">        });</div><div class="line">        <span class="keyword">return</span> option.toString();</div><div class="line">    }</div></pre></td></tr></table></figure></p>
<pre><code>    @JavascriptInterface
    public GsonOption markLineChartOptions() {
        GsonOption option = new GsonOption();
        option.legend(&quot;&#x9AD8;&#x5EA6;(km)&#x4E0E;&#x6C14;&#x6E29;(&#xB0;C)&#x53D8;&#x5316;&#x5173;&#x7CFB;&quot;);

        option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);

        option.calculable(true);
        option.tooltip().trigger(Trigger.axis).formatter(&quot;Temperature : &lt;br/&gt;{b}km : {c}&#xB0;C&quot;);

        ValueAxis valueAxis = new ValueAxis();
        valueAxis.axisLabel().formatter(&quot;{value} &#xB0;C&quot;);
        option.xAxis(valueAxis);

        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.axisLine().onZero(false);
        categoryAxis.axisLabel().formatter(&quot;{value} km&quot;);
        categoryAxis.boundaryGap(false);
        categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
        option.yAxis(categoryAxis);

        Line line = new Line();
        line.smooth(true).name(&quot;&#x9AD8;&#x5EA6;(km)&#x4E0E;&#x6C14;&#x6E29;(&#xB0;C)&#x53D8;&#x5316;&#x5173;&#x7CFB;&quot;).data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor(&quot;rgba(0,0,0,0.4)&quot;);
        option.series(line);
        return option;
    }
}
</code></pre><h3 id="2-webview-&#x4E0A;&#x542F;&#x7528;javascript-&#x5E76;&#x6CE8;&#x5165;java&#x5BF9;&#x8C61;"><a href="#2-WebView-&#x4E0A;&#x542F;&#x7528;JavaScript-&#x5E76;&#x6CE8;&#x5165;Java&#x5BF9;&#x8C61;&#xFF1A;" class="headerlink" title="2. WebView &#x4E0A;&#x542F;&#x7528;JavaScript &#x5E76;&#x6CE8;&#x5165;Java&#x5BF9;&#x8C61;&#xFF1A;"></a>2. WebView &#x4E0A;&#x542F;&#x7528;JavaScript &#x5E76;&#x6CE8;&#x5165;Java&#x5BF9;&#x8C61;&#xFF1A;</h3><p><a href="https://github.com/hanlyjiang/Demo-AndroidEChartWebJs/blob/master/AppTemplate/src/main/java/com/github/hanlyjiang/androidtemplate/EChartLocalInterfaceActivity.java" target="_blank" rel="external">&#x70B9;&#x51FB;&#x67E5;&#x770B;&#x5168;&#x90E8;&#x6587;&#x4EF6;&#x5185;&#x5BB9;</a></p>
<pre><code>webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new WebAppInterface(this), &quot;Android&quot;);
</code></pre>
    
  </div>
</article>

</div>


  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持HanlyJiang</div>
        <ul class="theme.donation.items.length">
        
          <li class="item">
            <img src="/images/qr-wechat.png" alt="">
          </li>
        
          <li class="item">
            <img src="/images/qr_zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>




  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/category/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/tag/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/atom.xml"
              rel="noopener noreferrer"
              target="_blank"
              >
              RSS
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    
  <section class="disqus-comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>

  <script>
    var disqus_shortname = 'forsigner';
    
    var disqus_url = 'http://hanlyjiang.github.io/2016/08/07/Android-上使用Echart-js/';
    
    (function(){
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>

  <script id="dsq-count-scr" src="//forsigner.disqus.com/count.js" async></script>



    




  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>

</body>
</html>
